<template>
	<div class="dp">
		<div class="dp-pes">
			<h4>配送信息</h4>
			<p class="clearfix">
				<span class="p-l">蜂鸟专送</span>
				<span class="p-r">约20分钟送达, 距离1.1km</span>
			</p>
			<p class="clearfix"><span class="p-r">配送费￥9</span></p>
		</div>
		<div class="dp-activity">
			<h4>活动与服务</h4>
			<div class="dp-acb">
				<p>
					<span>
						首
					</span>
					<span>新用户下单立减17元(不与其他活动同享)</span>
				</p>
				<p>
					<span>
						首
					</span>
					<span>新用户下单立减17元(不与其他活动同享)</span>
				</p>
				<p>
					<span>
						首
					</span>
					<span>新用户下单立减17元(不与其他活动同享)</span>
				</p>
				<p>
					<span>
						首
					</span>
					<span>新用户下单立减17元(不与其他活动同享)</span>
				</p>
			</div>
		</div>
		<div class="dp-liveAction">
			<h4>两家实景</h4>
			<div class="dp-li">
				<div class="dp-lia">
					<img src="https://fuss10.elemecdn.com/1/f5/ca423c20e0ef2528ac8271a5c9a15jpeg.jpeg?imageMogr/format/webp/thumbnail/!200x200r/gravity/Center/crop/200x200/">
					<span>门面(1张)</span>
				</div>
				<div class="dp-lia">
					<img src="https://fuss10.elemecdn.com/4/90/e6b0334faeba289a0577b002de5b3jpeg.jpeg?imageMogr/format/webp/thumbnail/!200x200r/gravity/Center/crop/200x200/">
					<span>大唐(1张)</span>
				</div>
			</div>
		</div>
		<div class="message">
			<h4>商家信息</h4>
			<p class="xd">
				新店入住
			</p>
			<p class="sjzong sj-phone">
				<span>商家电话</span>
				<span>010-6524690<span class="iconfont">&#xe64e;</span></span>
			</p>
			<p class="sjzong sj-path">
				<span>地址</span>
				<span>北京市崇文区门西大街4号楼裙房</span>
			</p>
			<p class="sjzong sj-path">
				<span>地址</span>
				<span>北京市崇文区门西大街4号楼裙房</span>
			</p>
			<p class="sjzong">
				<span>营业时间</span>
				<span>10:00-18:30</span>
			</p>
		</div>
		<div class="aptitude">
			<h4>营业资质<span class="iconfont">&#xe64e;</span></h4>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return{
			
		}
	}
}
</script>
<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.dp{
	width: 100%;
	height: 94vh;
	overflow: auto;
	.dp-pes{
		box-sizing: border-box;
		.pxToRem(padding,30);
		background: #fff;
		p{
			&:not(first-child){
				.pxToRem(margin-top,20);
			}
			span{
				float:left;
				.pxToRem(font-size,26);
			}
			.p-l{
				.pxToRem(padding-top,10);
				.pxToRem(padding-bottom,10);
				.pxToRem(padding-left,10);
				.pxToRem(padding-right,10);
				color: #fff;
				.pxToRem(border-radius,4);
				.pxToRem(margin-right,20);
				background: #0097ff;
			}
			.p-r{
				color: #666;
			}
		}
	}
	.dp-activity{
		background: #fff;
		box-sizing: border-box;
		.pxToRem(padding,30);
		.pxToRem(margin-top,20);
		.dp-acb{
			p{
				&:not(first-child){
					.pxToRem(margin-top,10);
				}
				span{
					box-sizing: border-box;
					&:first-child{
						display: inline-block;
						background:#70bc46;
						color: #fff;
						.pxToRem(padding,4);
						.pxToRem(border-radius,4);
						.pxToRem(font-size,24);
						.pxToRem(margin-right,10);
					}
					&:last-child{
						.pxToRem(font-size,22);
					}
				}
				&:nth-child(2){
					span{
						&:first-child{
							background:#f07373;
						}
					}
				}
				&:nth-child(3){
					span{
						&:first-child{
							background:#fff;
							color: #ccc;
							border:1px solid #ccc;
						}
					}
				}
				&:nth-child(4){
					span{
						&:first-child{
							background:#fff;
							color: #ccc;
							border:1px solid #ccc;
						}
					}
				}
			}
		}
	}
	h4{
		.pxToRem(font-size,32);
		.pxToRem(margin-bottom,20);
		font-weight: 555;
		span{
			float:right;
			color: #ccc;
			.pxToRem(font-size,32);
		}
	}
	.dp-liveAction{
		background: #fff;
		.pxToRem(margin-top,20);
		box-sizing: border-box;
		.pxToRem(padding,30);
		.dp-li{
			display:flex;
			.dp-lia{
				position: relative;
				.pxToRem(width,156);
				.pxToRem(height,156);
				.pxToRem(margin-right,14);
				img{
					width:100%;
				}
				span{
					width: 100%;
					text-align: center;
					position: absolute;
					bottom:0;
					background: rgba(0,0,0,.6);
					color: #fff;
					.pxToRem(height,36);
					.pxToRem(line-height,36);
					.pxToRem(font-size,22);
				}
			}
		}
	}
	.message{
		background: #fff;
		.pxToRem(margin-top,20);
		box-sizing: border-box;
		.pxToRem(padding-left,30);
		.pxToRem(padding-top,30);
		p{
			box-sizing: border-box;
			.pxToRem(height,90);
			.pxToRem(line-height,90);
			.pxToRem(padding-right,30);
			border-bottom:1px solid #ddd;
			&:last-child{
				border:none;
			}
		}
		.xd{
			color: #666;
			.pxToRem(font-size,24);
		}
		.sjzong{
			display: flex;
			justify-content:space-between;
			span{
				&:first-child{
					color:#333;
					font-weight: bold;
					.pxToRem(font-size,24);
				}
				&:last-child{
					color:#666;
					.pxToRem(font-size,20);
				}
			}
		}
	}
	.aptitude{
		background: #fff;
		.pxToRem(margin-top,20);
		.pxToRem(margin-bottom,20);
		box-sizing: border-box;
		.pxToRem(padding,30);
		.pxToRem(padding-bottom,10);
	}
}
</style>